<template>
    <view class="app">
        <view class="h772"></view>
        <view class="box">
            <view class="qmkj">
                <Title title='全民来砍价'/>
                <view class="con">
                    <view class="con-top">
                        <view class="top-img">
							<image src="../../../static/logo.png" mode="aspectFill"></image>
                        </view>
                        <view class="top-right">
                            <view class="right-tit">万科万岁寿司·料理店》深海三文鱼刺身56元/份</view>
                            <view class="right-num">剩余999个</view>
                            <view class="right-money">
                                <text class="new-money">￥56.0</text>
                                <text class="old-money">￥98.98</text>
                            </view>
                        </view>
                    </view>
                    
                    <view class="con-bottom">
                        <view class="avatar">
							<image src="../../../static/logo.png" mode="aspectFill"></image>
                        </view>
                        <view class="avatar-name">百無禁忌</view>
                        <view class="avatar-bottom-prompt">已经有<text>32</text>人帮助百無禁忌砍价了</view>
                        <view class="time-countdown">
                            <countdown :startTime="startTime" :endTime="enTime" />
                        </view>
                        <view class="schedule-num">砍掉<text>21.90</text>元，还差<text>165</text>元</view>
                        <view class="schedule">
                            <view class="schedule-bubble" :style="{left: progressRate<=10?'10%':progressRate>=90?'90%':`${progressRate}%`}">优惠{{progressRate}}.00元</view>
                            <view class="jiantou" :style="{left: `${progressRate}%`}"></view>
                            <view class="schedule-line" :style="{width: `${progressRate}%`}"></view>
                        </view>
                        <!-- <input type="text" v-model="progressRate"> -->
                        <view class="con-btn" v-if="true">
                            <view @click="progressRate += 10">帮TA砍价</view>
                            <view>我的减价</view>
                        </view>
                        <view class="con-btn1" v-else>
                            <view class="btn1-1" v-if="true">已砍到最低价，立即购买</view>
                            <view class="btn1-2" v-else>已完成砍价，谢谢参与</view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 砍价英雄榜 -->
            <view class="yxb">
                <Title title='砍价英雄榜'/> 
                <view class="yxb-list">
                    <view class="item" v-for="(item,index) in 3" :key="index">
                        <view class="item-avatar">
							<image src="../../../static/logo.png" mode="aspectFill"></image>
                        </view>
                        <view class="item-right">
                            <view class="right-top right">
                                <view class="top-left">百無禁忌</view>
                                <view class="top-right">砍掉21.90元</view>
                            </view>
                            <view class="right-but right">
                                <view class="but-left">看我一阳指，点点点</view>
                                <view class="but-right">2019.09.10</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
import countdown from '@/components/bargain/countdown.vue'
import Title from '@/components/bargain/title.vue'
export default {
    components:{countdown,Title},
    data(){
        return {
            startTime:'2020-01-01 00:00:00',
            enTime:'2020-02-01 00:00:00',
            progressRate:0,                    // 进度条进度 单位%
        }
    },
	watch:{
		progressRate(v){if(v>=100){this.progressRate = 100}}
	},
    methods:{
        //设置手机号*
        subStrMobile(mobile){   
            if(typeof(mobile)!='undefined'){return mobile.substr(0,3)+'****'+mobile.substr(7,11)}
        },
    }
}
</script>

<style scoped="scoped" lang="scss">
.app{font-family: PingFang SC, PingFang SC-Bold;background:#ec3b35 url(../../../static/bargain/bg.jpg) no-repeat center top; background-size:100% auto; position: relative;padding-bottom: 84rrpx}
.h772{ height:812rpx;}
.box{width: 698rpx;margin: 0 auto;}
// 全民来砍价
.qmkj{background: #fff;
    .con{padding: 0 30rpx;box-sizing: border-box;
        .con-top{padding:  30rpx 15rpx 35rpx;display: flex;border-bottom: 2rpx dashed #DBDBDB;
            .top-img{width: 176rpx;height: 176rpx;margin-right: 20rpx}
            .top-right{flex: 1;display: flex;flex-direction: column;
                .right-tit{font-size: 28rpx;color: #333;margin-bottom: 8rpx;line-height: 40rpx}
                .right-num{font-size: 22rpx;color: #FF8B7D;flex: 1}
                .right-money{font-size: 28rpx;display: flex;align-items: center;line-height: 40rpx;
                    .old-money{color: #999999;font-size: 24rpx;}
                }
            }
        }
        .con-bottom{padding: 25rpx 0 54rpx;
            .avatar{width: 140rpx;height: 140rpx;border-radius: 50%;overflow: hidden;margin:0 auto;}
            .avatar-name{font-size: 24rpx;color: #656565;margin-top: 12rpx;line-height: 34rpx;text-align: center;}
            .avatar-bottom-prompt{font-size: 32rpx;text-align: center;color: #312F32;font-weight: bold;line-height: 44rpx;margin: 8rpx 0 38rpx;letter-spacing: 1rpx;
                text{color: #DC654D}
            }
            .time-countdown{display: flex;justify-content: center;margin-bottom: 32rpx;}
            .schedule-num{text-align: center;font-size: 38rpx;font-weight: bold;letter-spacing: 2rpx;margin-bottom: 82rpx;line-height: 52rpx;
                &>text:nth-child(1){color: #DC654D}
                &>text:nth-child(2){color: #D8332F}
            }
            .schedule{width: 594rpx;height: 24rpx;background: #FFE5AA;margin: 0 auto;border-radius: 12rpx;position: relative;margin-bottom: 36rpx;
                .schedule-bubble{position: absolute;top:-54rpx;font-size: 22rpx;color: #fff;background: linear-gradient(#FFA25D,#F55A00);width: 160rpx;text-align: center;height: 38rpx;line-height: 38rpx;border-radius: 4rpx;transition: all 0.3s ease;transform: translateX(-50%);}
                .schedule-line{background: linear-gradient(#FF3D21,#FF6954);position: absolute;left: 0;top: 0;bottom: 0;border-radius: 12rpx;transition: all .3s ease}
                .jiantou{position: absolute;top: -16rpx;transform: translateX(-50%) rotate(180deg);transition: all 0.3s ease;width: 0;height: 0;border: 10rpx solid;border-color: transparent transparent #FF6954;}
            }
            .con-btn{width: 594rpx;margin: 0 auto;display: flex;justify-content: space-between;
                view{width: 280rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: linear-gradient(#FACB58,#FF9900);color: #fff;font-size:32rpx;border-radius: 40rpx;box-shadow: 0 10rpx 0 #F8882F;
                    &:active{position: relative;top: 10rpx;box-shadow: 0 0 0 #F8882F}
                }
            }
            .con-btn1{display: flex;justify-content: center;width: 594rpx;margin: 0 auto;
                .btn1-1{width: 446rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: linear-gradient(#FACB58,#FF9900);color: #fff;font-size:32rpx;border-radius: 40rpx;box-shadow: 0 10rpx 0 #F8882F;
                    &:active{position: relative;top: 10rpx;box-shadow: 0 0 0 #F8882F}
                }
                .btn1-2{width: 446rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #b7b7b7;color: #fff;font-size:32rpx;border-radius: 40rpx;box-shadow: 0 10rpx 0 #9e9e9e;}
            }
        }
    }
}
// 砍价英雄榜
.yxb{background: #fff;
    .yxb-list{padding: 0 34rpx 29rpx;
        .item{display: flex;align-items: center;height: 145rpx;border-bottom: 2rpx dashed #BBBBBB;
            &:nth-last-child(1){border: 0}
            .item-avatar{width: 84rpx;height: 84rpx;border-radius: 50%;overflow: hidden;margin-right: 24rpx;}
            .item-right{flex: 1;
                .right-top{margin-bottom: 8rpx;}
                .right{display: flex;align-content: center;justify-content: space-between;
                    .but-left,.but-right{line-height: 34rpx;}
                    .top-left,.but-left,.but-right{font-size: 24rpx;color: #333;}
                    .top-right{font-size: 28rpx;color: #DC654D;font-weight: bold;}
                }
            }
        }
    }
}


</style>
 